<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>控制台</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- bootstrap css -->
<link rel="stylesheet"
	href="${ctx}/template/assets/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="${ctx}/template/assets/css/font-awesome.min.css" />
<!-- jquery ui grid css -->
<link rel="stylesheet"
	href="${ctx}/template/assets/css/jquery-ui-1.10.3.full.min.css" />
<!-- do not kown  -->
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
<!-- ace ss -->
<link rel="stylesheet" href="${ctx}/template/assets/css/ace.min.css" />
<link rel="stylesheet" href="${ctx}/template/assets/css/ace-rtl.min.css" />
<link rel="stylesheet"
	href="${ctx}/template/assets/css/ace-skins.min.css" />
<style type="text/css">
#dialog {
	display: none;
	width: 600px;
	height: 400px;
}
</style>
</head>
<body onload="loadData(1,15)">

	<div class="page-content">
		<div class="row">
			<div class="col-xs-12">
				<div class="table-responsive">
					<table id="sample-table-1"
						class="table table-striped table-bordered table-hover">
						<!-- 头 -->
						<thead>
							<tr>
								<th class="center"><label> <input type="checkbox"
										class="ace" /> <span class="lbl"></span>
								</label></th>
								<th>角色名</th>
								<th>描述</th>
								<th>状态</th>
								<th>创建时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<!-- 头 -->
						<!-- 内容 -->
						<tbody id="data_body">

						</tbody>
						<!-- 内容结束 -->
					</table>
					<!-- 分页开始 -->
					<ul id="pagination" class="pagination">
					</ul>
					<!-- 分页结束 -->
				</div>
				<!-- /.table-responsiv
							</div><!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content -->

		<!-- 弹出层 -->
		<a class="btn" onclick="keleyidialog()">新增角色</a>
		<!-- Modal -->
		<div id="dialog" class="row" title="新增角色">
			<div class="col-xs-12">
				<form id="add_form" class="form-horizontal" role="form">
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right"
							for="form-field-1">角色名</label>

						<div class="col-sm-9">
							<input type="text" name="roleName" id="roleName"
								placeholder="角色名" class="col-xs-10 col-sm-5" />
						</div>
					</div>

					<div class="space-4"></div>

					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right"
							for="form-field-2">角色描述</label>

						<div class="col-sm-9">
							<input type="password" name="roleDescribed" id="roleDescribed"
								placeholder="描述" class="col-xs-10 col-sm-5" />
						</div>
					</div>
					<div class="space-4"></div>

					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right"
							for="form-field-2">状态</label>
						<div class="col-sm-9">
							<select class="col-sm-5" id="status" name="status">
								<option value="1">启用</option>
								<option value="0">未启用</option>
							</select>
						</div>
					</div>

					<div class="clearfix form-actions">
						<div class="col-md-offset-3 col-md-9">
							<button class="btn btn-info" type="button" onclick="addRole();">
								<i class="icon-ok bigger-110"></i> 提交
							</button>
							&nbsp; &nbsp; &nbsp;
							<button class="btn" type="reset">
								<i class="icon-undo bigger-110"></i> 清空
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<div id="dialog_res" title="编辑资源">
			<div class="widget-box">
				<div class="widget-body">
					<div class="widget-main padding-8">
						<div id="tree_res" class="tree"></div>
						<div class="clearfix form-actions">
						<div class="col-md-offset-3 col-md-9">
						    <input type="hidden" id="role_id">
							<button class="btn btn-info" type="button"
								onclick="saveRoleResource();">
								<i class="icon-ok bigger-110"></i> 确定
							</button>
						</div>
					</div>
					</div>
				</div>
			</div>
		</div>


	</div>
	<jsp:include page="../common/import.jsp" />
	<script type="text/javascript">
		$(function() {
			$('#dialog').dialog({
				autoOpen : false,//如果设置为true，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。 
				bgiframe : true, //解决ie6中遮罩层盖不住select的问题  
				width : 500,
				modal : true
			//这个就是遮罩效果   
			});
			createDialog();
			initTree();
		})

		function keleyidialog() {
			$('#dialog').dialog('open');
			return false;
		}

		function addRole() {
			$.ajax({
				type : "POST",
				url : "${ctx}/admin/user/addRole",
				data : $("#add_form").serialize(),
				dataType : "json",
				success : function(data) {
					if (data.code == 1) {
						$('#dialog').dialog('close');
						$("#add_form")[0].reset();
						loadData(1, 15);
					} else {
						alert(data.message);
					}
				}
			});
		}

		function getStatus(userStatus) {
			if (userStatus == 1) {
				return '<span class="label label-sm label-success">启用</span>';
			}
			return '<span class="label label-sm label-warning">未启用</span>';
		}

		function loadData(pageNum, pageSize) {
			$.ajax({
				type : "GET",
				url : "${ctx}/admin/user/getAllRoles",
				data : {
					pageNo : pageNum,
					pageSize : pageSize
				},
				dataType : "json",
				success : function(data) {
					var arr = data.data;
					$("#data_body").html("");
					$("#pagination").html("");
					if (arr.rows != null && arr.rows.length > 0) {
						data2page(arr.rows);
						initPage(arr);
					}
				}
			});
		}

		function data2page(list) {
			for (var i = 0; i < list.length; i++) {
				var tep = list[i];
				var temp = "<tr><td class='center'><label><input type='checkbox' class='ace'/>"
				temp = temp + "<span class='lbl'></span></label></td>";
				temp = temp + "<td>" + tep.roleName + "</td>";
				temp = temp + "<td>" + tep.roleDescribed + "</td>";
				temp = temp + "<td>" + getStatus(tep.status) + "</td>";
				temp = temp + "<td>" + formateDataCanNull(tep.createTime)
						+ "</td>";
				temp = temp
						+ '<td><div class="visible-md visible-lg hidden-sm hidden-xs btn-group">'
						+ '<button onclick="editRoleRes('
						+ tep.roleId
						+ ');" class="btn btn-xs btn-success"><i class="icon-asterisk bigger-120"></i></button></td>';
				$("#data_body").append(temp);
			}
		}

		function saveRoleResource(){
			 var roles=[];
		     $('input[name="roleResource"]:checked').each(function(){    
			     roles.push($(this).val());  
			 }); 
		     $.ajax({
					type : "POST",
					url : "${ctx}/admin/user/addRoleResource",
					data : {
						roleId : $("#role_id").val(),
						roles : JSON.stringify(roles)
					},
					dataType : "json",
					success : function(data) {
						alert(data.message);
						$('#dialog_res').dialog('close');
						loadData(1,15);
					}
				});
		}
		
		function editRoleRes(roleId) {
			$("#role_id").val(roleId);
			$('#dialog_res').dialog('open');
		}
		
		function  createDialog() {
			$('#dialog_res').dialog({
				autoOpen : false,//如果设置为true，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。 
				bgiframe : true, //解决ie6中遮罩层盖不住select的问题  
				width : 500,
				modal : true
			});
		}
		
		
		function loadResource(callback) {
			$("#parentId").html('');
			$("#parentId").append('<option value="0">一级菜单</option>');
			$.ajax({
				type : "GET",
				url : "${ctx}/admin/user/getAllResource",
				dataType : "json",
				success : function(data) {
					var temp = data.data;
					if (!temp) {
						return;
					}
						var temp1 = '{';
						for (var i = 0; i < temp.length; i++) {
							var first=temp[i].first;
							$("#parentId").append('<option value="'+first.resourceId+'">'+first.resourceName+'</option>');
							temp1 += '"'+ first.resourceName+ '":'+ resource(first.resourceName, 'folder',
											'green', temp[i].seconds);
							if (i < temp.length - 1) {
								temp1 += ",";
							}
						}
						temp1 += "}";
						var json = $.parseJSON(temp1);
						console.log(json);
						callback(json);
				}
			});
		}

		//拥有父目录的
		function resource(name, type, icon, seconds) {
			var obj = new Object();
			if(seconds!=null||seconds.length!=0){
				obj.additionalParameters = additionalParameters(seconds);
			}
			obj.name =name;
			obj.type = type;
			if (type == 'folder') {
				obj.myicon = icon;
			}
			var res = JSON.stringify(obj);
			res = res.replace('myicon', 'icon-class');
			return res;
		}

		function additionalParameters(seconds) {
			var obj = new Object();
			obj.children = initSec(seconds);
			return obj;
		}

		function initSec(child) {
			var array =[];
			for(var i=0;i<child.length;i++){
				array.push(seconds(child[i].resourceId,child[i].parentId,child[i].resourceName,'item'));
			}
			return array;
		}

		function seconds(resourceId,parentId,name,type){
			var obj = new Object();
			obj.name =  '<label><input type="checkbox" name="roleResource" class="ace ace-checkbox" value="'+parentId+'-'+resourceId+'"><span class="lbl"> '+name+'</span></label>';
			obj.type = type;
			return obj;
		}
		
		function initTree() {
			loadResource(function(res) {
						var DataSourceTree = function(options) {
							this._data = options.data;
							this._delay = options.delay;
						}

						DataSourceTree.prototype.data = function(options,
								callback) {
							var self = this;
							var $data = null;

							if (!("name" in options) && !("type" in options)) {
								$data = this._data;//the root tree
								callback({
									data : $data
								});
								return;
							} else if ("type" in options
									&& options.type == "folder") {
								if ("additionalParameters" in options
										&& "children" in options.additionalParameters)
									$data = options.additionalParameters.children;
								else
									$data = {}//no data
							}

							if ($data != null)//this setTimeout is only for mimicking some random delay
								setTimeout(function() {
									callback({
										data : $data
									});
								}, parseInt(Math.random() * 500) + 200);
						};

						var treeDataSource2 = new DataSourceTree({
							data : res
						});
						$('#tree_res')
								.ace_tree(
										{
											dataSource : treeDataSource2,
											loadingHTML : '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
											'open-icon' : 'icon-folder-open',
											'close-icon' : 'icon-folder-close',
											'selectable' : false,
											'selected-icon' : null,
											'unselected-icon' : null
										});
					});
		}
	</script>
</body>
</html>

